<template>
  <div>
vue2:{{ doubleCount  }}
vue3:{{ tripleCount }}
<button @click="count++">count++</button>
  </div>
</template>

<script>
// 回顾一下vue2中的计算属性

export default {
  name: 'App',
  data(){
  return{
    count:2
  }
},
computed:{
  doubleCount(){
    //基于data的数据进行计算,并且返回
    return this.count*2
  }
}
}

</script>

<script setup>
//vue3中的计算属性和vue2的思想是一样的,语法不同
import { ref,computed } from 'vue';
const count=ref(2)
const tripleCount=computed(()=>{
  return count.value*3
})

</script>

<style lang="scss" scoped>

</style>